<template>
  <div
    class="myborder sciencecenter"
    :style="{ width: 'auto', height: '100%' }"
  >
    <el-row class="righttop">
      <el-col class="righttopbody" :span="8">
        <el-row class="righttopbody-1">
          <el-col :span="10" class="righttopbody-img">
            <img
              src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/icon_data/zhucerenshu.svg"
              alt=""
            />
          </el-col>
          <el-col :span="14" class="righttoptext">
            <div class="text-1">注册人数</div>
            <div class="text-2">
              <MynumberVue
                class="colorb"
                :num="teamuser.usercount"
              ></MynumberVue>
              <span class="texta">人</span>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col class="righttopbody" :span="8">
        <el-row class="righttopbody-1">
          <el-col :span="10" class="righttopbody-img">
            <img
              src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/icon_data/denglurenshu.svg"
              alt=""
            />
          </el-col>
          <el-col :span="14" class="righttoptext">
            <div class="text-1">教师人数</div>
            <div class="text-2">
              <MynumberVue
                class="colorb"
                :num="teamuser.teachercount"
              ></MynumberVue>
              <span class="texta">人</span>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col class="righttopbody" :span="8">
        <el-row class="righttopbody-1">
          <el-col :span="10" class="righttopbody-img">
            <img
              src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/kexuezhongxin/icon_data/pingcerenshu.svg"
              alt=""
            />
          </el-col>
          <el-col :span="14" class="righttoptext">
            <div class="text-1">学生人数</div>
            <div class="text-2">
              <MynumberVue
                class="colorb"
                :num="
                  Number(teamuser.usercount) - Number(teamuser.teachercount)
                "
              ></MynumberVue>
              <span class="texta">人</span>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="righttop">
      <el-col class="righttopbody" :span="8">
        <el-row class="righttopbody-1">
          <el-col :span="10" class="righttopbody-img">
            <img
              src="https://cdn.hterobot.com/JOY/kexuezhongxin/icon_data/0782d5e9-7ca1-44d1-afce-714582f9d658.png"
              alt=""
              width="60"
              height="60"
            />
          </el-col>
          <el-col :span="14" class="righttoptext">
            <div class="text-1">测评次数</div>
            <div class="text-2">
              <MynumberVue class="colorc" :num="num2"></MynumberVue>
              <span class="texta">次</span>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col class="righttopbody" :span="8">
        <el-row class="righttopbody-1">
          <el-col :span="10" class="righttopbody-img">
            <img
              src="https://cdn.hterobot.com/JOY/kexuezhongxin/icon_data/79c34393-bb63-4f4b-bd89-81bcb52598d4.png"
              alt=""
              width="60"
              height="60"
            />
          </el-col>
          <el-col :span="14" class="righttoptext">
            <div class="text-1">测评AC次数</div>
            <div class="text-2">
              <MynumberVue class="colorb" :num="char4?.account"></MynumberVue>
              <span class="texta">次</span>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col class="righttopbody" :span="8">
        <el-row class="righttopbody-1">
          <el-col :span="10" class="righttopbody-img">
            <img
              src="https://cdn.hterobot.com/JOY/kexuezhongxin/icon_data/1f7a2a34-c7a8-4b91-a726-7fdca4d8ce71.png"
              alt=""
              width="60"
              height="60"
            />
          </el-col>
          <el-col :span="14" class="righttoptext">
            <div class="text-1">看视频次数</div>
            <div class="text-2">
              <MynumberVue class="colorc" :num="video3"></MynumberVue>
              <span class="texta">次</span>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <Mytitle title="测评占比"></Mytitle>
    <chartlabelVue :char5="char5" :char9="char9"></chartlabelVue>

    <div
      class="row"
      :style="{ textAlign: 'center', color: '#fff' }"
      title="该数据统计团队所有成员的历史提交评测时间分布，【包括】团队创建前的评测提交"
    >
      <div class="col">
        <Mytitle title="成员做题时间分布"></Mytitle>
        <chart2Vue :data="data7" :height="270"></chart2Vue>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import MynumberVue from "../../../components/animejs/mynumber.vue";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import chartlabelVue from "./chartlabel.vue";
import chart2Vue from "../../../components/antv/chart2.vue";
import areaVue from "../../../components/antv/area.vue";
import Mytitle from "../../mytitle.vue";
const p = defineProps<{
  char7: any[];
  char8: Studycodemodel.Iuser[];
  centerref: any;
  num1: number;
  num3: number;
  num2: number;
  chat: string;
  char4: any;
  video3: number;
  char5: any;
  char9: any;
  data7: any[];
}>();
const teamuser = computed(() => {
  return (
    p.char7[0] || {
      usercount: 0,
      teachercount: 0,
    }
  );
});
</script>

<style scoped>
.right-table {
  padding: 12px 12px 6px 12px;
  --el-table-bg-color: rgba(0, 0, 0, 0.2);
  background-color: var(--el-table-bg-color);
  border-radius: 4px;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
  margin-top: 24px;
}

.righttop {
  margin-left: -12px;
  margin-right: -12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #545e72;
  padding-right: 12px;
  margin-bottom: 24px;
}

.righttop {
  text-align: center;
}

.righttoptext {
  text-align: left;
}

.text-1 {
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  font-family: "FZZongYi-M05S";
  height: 32px;
  line-height: 32px;
}

.text-2 {
  line-height: 32px;
}

.colora {
  background: linear-gradient(315deg, #0670f8 0%, #34c7fc 100%);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 22px;
  color: transparent;
  display: inline-block;
  font-family: Bebas;
  font-weight: 700;
}

.colorb {
  background: linear-gradient(180deg, #fe8b16 0%, #f84228 100%);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 22px;
  color: transparent;
  display: inline-block;
  font-family: Bebas;
  font-weight: 700;
}

.colorc {
  background: linear-gradient(180deg, #fcf100 0%, #f5a300 100%);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 22px;
  color: transparent;
  display: inline-block;
  font-family: Bebas;
  font-weight: 700;
}

.texta {
  font-size: 14px;
  color: #fff;
  display: inline-block;
  margin-left: 6px;
}

.righttopbody {
  padding-left: 12px;
}

.righttopbodyright {
  padding-right: 12px;
}

.righttopbody-1 {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  height: 100px;
  justify-content: center;
  align-items: center;
}

.righttopbody-img {
  padding-top: 8px;
}
</style>
